<template>
  <div class="my-m mx-m h-full overflow-y-auto m-relative pt-12n">
    <div class="flex w-fit flex-j-c m-fixed t-28n z-index-9999 position-center-x">
      <div class="screen-box round-8 h-10n bgfff w-fit flex-center px-20">
        <a-input-group>
          <a-select
            :style="{ width: 'fit-content' }"
            :trigger-props="{ autoFitPopupMinWidth: true }"
            v-model="commonParam.momentId"
            @change="getTopData"
          >
            <a-option value="" label="全部素材群" />
            <a-option v-for="item in momentListData" :key="item.momentId" :value="item.momentId" :label="item.name" />
          </a-select>
          <a-divider direction="vertical" />
          <ms-date
            class="w-60n"
            :show-time="false"
            v-model:start="commonParam.startAt"
            :disabledDate="
              (current) =>
                dayjs(current).isAfter(dayjs().endOf('date')) ||
                dayjs(current).isBefore(dayjs('2023-09-07').startOf('date'))
            "
            v-model:end="commonParam.endAt"
            :showQuick="true"
            @dateChange="getTopData"
          ></ms-date>
          <a-button type="text" size="mini" @click="handleUpdateData">
            <icon-refresh />
            更新时间：{{ renew }}
          </a-button>
        </a-input-group>
      </div>
    </div>
    <a-spin class="mt-30 px-10" :loading="topLoading">
      <a-radio-group v-model="selectValue" v-if="topData">
        <template v-for="item in totalData" :key="item.key">
          <a-radio :value="item.type" class="mb-20">
            <template #radio="{ checked }">
              <a-space align="start" class="custom-checkbox-card" :class="{ 'custom-checkbox-card-checked': checked }">
                <div>
                  <div className="custom-checkbox-card-title text-size-12 flex flex-a-c">
                    <i class="iconfont text-size-22 mr-6" :class="item.icon"></i>
                    {{ item.label }}（{{ item.unit }}）
                  </div>
                  <a-statistic
                    :value="topData[item.key].count"
                    :precision="item.precision"
                    :value-style="{ fontWeight: 'bold', fontSize: '20px' }"
                  />
                </div>
              </a-space>
            </template>
          </a-radio>
        </template>
      </a-radio-group>
    </a-spin>
    <div class="mt-20 bgfff">
      <Chart ref="ChartRef" :commonParam="commonParam" :selectValue="selectValue" />
    </div>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { momentStatisticsTotalData, momentList } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import { totalDataO } from './data.js'
import Chart from './Chart.vue'
import { Message } from '@arco-design/web-vue'

defineOptions({ name: 'circleStatistics' })

const renew = ref(dayjs().format('YYYY.MM.DD HH:mm:ss'))
const totalData = ref(totalDataO)
const topData = ref(false)
const topLoading = ref(false)
const ChartRef = ref()
const selectValue = ref('daysOpenMoment')
const momentListData = ref([])

// 获取列表数据
const getMomentList = async () => {
  const res = await momentList()
  momentListData.value = res.data.list
}
getMomentList()

// 公共参数
const commonParam = ref({
  startAt: dayjs().subtract(7, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  endAt: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
  momentId: ''
})

// 获取头部信息
const getTopData = async () => {
  try {
    topLoading.value = true
    const param = {
      startAt: dayjs(commonParam.value.startAt).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      endAt: dayjs(commonParam.value.endAt).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
      momentId: commonParam.value.momentId
    }
    const res = await momentStatisticsTotalData(deleteEmpty(param))
    topData.value = res.data
    renew.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  } finally {
    topLoading.value = false
  }
}
getTopData()

const handleUpdateData = async () => {
  await getTopData()
  await ChartRef?.value?.getData()
  Message.success('刷新成功')
}
</script>

<style lang="scss" scoped>
.screen-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  :deep(.arco-select-view, .arco-picker) {
    border: none;
  }
  :deep(.arco-picker) {
    border: none;
  }
  :deep(.arco-divider-vertical) {
    margin: 0;
  }
}

.custom-checkbox-card {
  padding: 20px 16px;
  border-radius: 6px;
  background-color: #fff;
  width: fit-content;
  min-width: 260px;
  box-sizing: border-box;
}

.custom-checkbox-card-title {
  color: #808080;
  margin-bottom: 10px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked {
  border-color: rgb(var(--primary-6));
}
.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
  box-shadow: 0px 0px 10px 2px var(--color-primary-light-2);
}
.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}
</style>
